your name here

[2025-07-09] 웹 기초

🦥 본문

HTTP를 이용하여 정보를 공유하는 서비스. Web Server와 Web Client가 정보 교환한다.

프론트엔드와 백엔드

프론트 엔드 : 이용자의 요청을 받는 부분. 이용자에게 직접 보여지는 부분으로 Web Resource라는 것으로 구성된다.

  • Web Resource : 웹 상에서 고유한 URI(or URL)를 통해 접근 가능한 모든 대상. EX) HTML, CSS, 이미지, JS 파일, JSON, ….
    • URI : Uniform Resource Identifier. 웹에서 자원을 식별하기 위한 표준 형식의 문자열. 어떤 자원이 어디 있는지를 가리키는 방법. URL과 URN이 있음
      • URL : 자원의 위치를 알려줌. ex) https://example.com/index.html
      • URN : 자원의 이름을 알려 ex) urn:isbn:978-3-16-148410-0

백엔드 : 요청을 처리하는 부분

동작 흐름

  1. 클라이언트가 브라우저를 통해 웹 서버에 접속
  2. 브라우저가 사용자의 요청을 해석하여 웹 서버에 웹 리소스를 요청
  3. 서버가 요청을 해석하고 처리하여 리소스를 클라이언트에게 전달
  4. 브라우저가 웹 리소스를 받아 렌더링하여 사용자에게 보여줌

인코딩

사람이 이해하거나 시스템이 처리할 수 있도록 특정 형식으로 변환하는 것. 아스키 코드와 유니 코드가 있음.

반대로 디코딩은 변환된 정보를 원래대로 되돌리는 것이다.

통신 프로토콜

통신을 하기 위한 프로토콜(약속, 규칙). Syntax를 지켜서 데이터를 요청-응답한다.

HTTP : 웹 브라우저와 서버가 데이터를 주고 받는 프로토콜

HTTPS : HTTP + SSL/TLS

FTP : 파일 전송 프로토콜. 서버와 파일을 주고받을 때 사용

TCP/IP : TCP는 전송 계층에서의 프로토콜. IP는 인터넷 계층의 프로토콜

HTTP

Hyper Text Transfer Protocol. 웹 브라우저와 웹 서버가 통신할 때 사용하는 규칙. 요청-응답 형식 데이터 교환.

동작 흐름

  1. 웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기시킨다. 즉, 웹 서버가 클라이언트가 접속할 수 있도록 포트를 열어놓고 대기하고 있음
  2. 클라이언트가 서비스 포트에 HTTP 요청을 전송하면 응답함.
    • HTTP 서버 : HTTP 프로토콜을 처리하는 데 집중하는 프로그램. 웹 서버 = HTTP 서버 + 부가 기능
    • 네트워크 포트 : 전송 계층에서 한 컴퓨터에 여러 애플리케이션을 구분하기 위한 번호. 네트워크에서 서버와 클라이언트가 통신하는 추상화된(논리적) 장소
    • 서비스 포트 : 네트워크 포트 중 특정 서비스가 점유하고 있는 포트
    • SSH는 22번, HTTP는 80번, HTTPS는 443이 할당

HTTP 헤더

CRLF : Carriage Return (CR, \r : 커서를 맨 앞으로 이동) + Line Feed(LF, \n : 한 줄 아래로 이동)의 조합

바디 외에도 어떤 형식, 정보, 옵션 등이 필요한지 알려주는 메타데이터. HTTP 헤더는 CRLF로 줄이 구분되며 첫 줄은 Start line, 나머지 줄은 Header라고 함. 필드와 값으로들로 구성되어 있다.

HTTP 바디

통신 간 메시지에서 실제 데이터를 담는 부분. 헤더 끝을 나타내는 CRLF 뒤 모든 줄을 말한다.

HTTP 요청

Request Line (시작 줄) : Method + Request Target(URI) + HTTP 프로토콜 버전
Request Headers
빈 줄 (CRLF)
Request Body

//ex
POST /login HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

username=admin&password=1234

HTTP 응답

Status Line(상태 라인) : HTTP 프로토콜 버전 + 상태 코드 + Reason Phrase(상태 메시지)
Response Header
빈 줄 (CRLF)
Response Body 

//ex
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 48

<html>
  <body>Welcome!</body>
</html>

상태 코드 설명 및 예시 : https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status

HTTPS

HTTP + SSL/TLS로 HTTP 통신을 암호화한 프로토콜. HTTP는 기본적으로 평문이므로 보안이 없기 대문에 도입된 프로토콜이다.

SSL/TLS

데이터를 암호화하고 인증하는 보안 프로토콜

SSL : Secure Sockets Layer. 초기 버전으로 현재는 사용 하지 않지만 실무에서는 SSL이라 주로 말함

TLS : Transport Layer Security. SSL에서 발전된 표준

  • 암호화 : 데이터를 암호화
  • 인증 : 서버 또는 클라이언트의 신원을 증명
  • 무결성 : 데이터가 변조되지 않았음을 확인

동작 과정 (TLS Handshake. TLS 1.2)

  1. Client Hello : 클라이언트가 사용할 수 있는 암호화 방식, TLS 버전 등을 보내게 되는 데, client random number(client_random)가 포함된다.
  2. Server Hello : 서버가 사용할 암호화 방식을 선택하고 서버 인증서와 공개키를 보낸다. 이 때에도 server random number(server_random)가 포함된다
  3. 서버 인증서 검증 : 클라이언트가 서버 인증서가 유효한지를 CA(인증기관)로 부터 서명을 확인하는 방식으로 검사한다
  4. Pre-Master Secret 생성 : 클라이언트가 대칭키 생성을 위한 데이터를 서버 공개키로 암호화해서 보낸다
  5. 대칭키 생성 : 클라이언트와 서버는 동일한 세션 키를 만들어내고 이후의 데이터를 대칭키로 암호화한다.
  6. FIN 메시지 보낸다

웹 브라우저

웹 사이트를 보기 위한 프로그램

기능 및 동작 흐름

image.png

  1. URL 분석
  2. DNS 서버와 통신하여 IP 주소 탐색
  3. HTTP 를 통해 웹 서버와 통신
  4. 리소스 다운로드 및 웹 랜더링

추가로 JS 실행, 쿠키 세션 관리, 캐시와 기록 저장, 보안 관리(인증서 확인 및 경고 메시지 출력) 등을 수행한다.

URL

웹에 있는 리소스의 위치를 표현하는 문자열 image.png

Scheme : 자원에 접근하기 위해 사용되는 프로토콜

Host : 자원이 위치한 서버의 도메인 이름이나 IP 주소

Port : 서버에서 자원에 접근하는 데 사용되는 특정 프로토콜 포트 번호

  • Authority = Host + Port

Path : 웹 서버의 리소스 경로

Query : 웹 서버에 전달하는 파라미터

Fragment : 메인 리소스에 존재하는 서브 리소스를 접근할 때 식별하는 정보

DNS

Domain name : 웹사이트를 사람이 읽을 수 있게 만든 주소

DNS : Domain name System. DNS 서버와 통신하여 도메인 이름을 IP 주소로 바꿔주는 시스템 image.png

  • DNS Resolver : DNS에 주소 권한을 요청하는 프로그램
    • 로컬 DNS 서버의 주소가 필요
  • DNS 서버에 요청하여 주소를 받아옴
  • 한 로컬 DNS 서버가 모든 주소를 가지고 있지 않기 때문에 다른 로컬 DNS 서버에 요청도 함

웹 렌더링

서버로부터 받은 리소스를 해석하여 이용자에게 시각화하는 과정. 웹 렌더링 엔진에 의해서 이뤄짐.

동작 흐름

  1. HTML 파싱 : DOM 생성
  2. CSS 파싱 : CSSOM 생성
  3. DOM + CSSOM 결합 : 렌더 트리 생성
  4. 레이아수 계산 : 요소들의 크기와 위치 계산
  5. 페인팅 : 픽셀 단위로 요소들을 시각화
  6. 디스플레이 : 화면에 최종 결과 출력

개발자 도구

웹사이트를 분석, 디버깅, 최적화하기 위한 도구 모음

요소 검사 : 웹페이지의 HTML 구조와 CSS 스타일을 실시간으로 확인하고 수정할 수 있는 도구

디바이스 툴바 : 다양한 기기 화면 크기로 웹사이트를 테스트할 수 있는 기능

패널 설명
Elements HTML 구조 및 CSS 확인·수정.
Console JS 로그 출력, 에러 확인, JS 코드 직접 실행
Sources JS 코드 디버깅 (중단점, 변수 확인 등)
Network 요청/응답 정보 확인 (HTTP 헤더, 상태 코드, 응답 시간 등)
Application 쿠키, 로컬스토리지, 세션, 캐시, 서비스 워커 등 웹 어플리케이션과 관련된 데이터 확인
Performance 페이지 렌더링 성능 분석 (Reflow, Paint, JS 실행 시간 등)
Lighthouse 웹 성능/접근성/SEO 자동 분석 도구
Security HTTPS, 인증서, Mixed Content 등 보안 상태 확인
  • Sources image.png 빨강 : 현재 페이지의 리소스 파일 트리, 파일 트리, 파일 시스템

노랑 : 선택한 리소스 상세 보기

초록 : 디버깅 정보

  • Watch: 원하는 자바스크립트 식을 입력하면, 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있습니다.
  • Call Stack: 함수들의 호출 순서를 스택 형태로 보여줍니다. 예를 들어, A → B → C 순서로 함수가 호출되어 현재 C 내부의 코드들 실행하고 있다면, Call Stack의 가장 위에는 C, 가장 아래에는 A가 위치합니다.
  • Scope: 정의된 모든 변수들의 값을 확인할 수 있습니다.

  • Breakpoints: 브레이크포인트들을 확인하고, 각각을 활성화 또는 비활성화할 수 있습니다. image.png 해당 코드를 클릭하여 breakpoint를 만들고 디버깅을 진행할 수 있다.

  • Network image.png 빨강 : 로깅 중지 및 로그 전체 삭제

주황 : 로그 필터링 및 검색

초록 : 옵션

  • Preserve log: 새로운 페이지로 이동해도 로그를 삭제하지 않습니다.
  • Disable cache: 이미 캐시된 리소스도 서버에 요청합니다.

노랑 : 네트워크 로그

파랑 : 네트워크 로그 요약 정보 image.png Copy as fetch를 통해 HTTP Request를 복사하고 Console 패널에 복붙하면 동일한 요청을 서버에 재전송할 수 있음

  • Application image.png 브라우저에 저장된 쿠키 정보를 확인하고 수정할 수 있다

  • Ctrl + U 를 통해 페이지 소스 보기를 하여 페이지와 관련되 소스 코드들을 확인할 수 있다
  • 시크릿 모드는 : 방문 기록, 쿠키 및 사이트 데이터, 양식에 입력한 정보, 웹사이트에 부여된 권한을 저장하지 않고 탭 간에 쿠키를 공유하지 않는다.

Categories:

Updated:

Leave a comment

You may also enjoy